import React from 'react';
import './App.css';
import HelloHook from "./page/Hello-hook"
import UserReduce from "./page/User-reduce"
import TodoApp from "./page/ToDoApp"
import {
    BrowserRouter as Router,
    Switch,
    Link,
    Redirect,
    NavLink,
    Route,
    useLocation,
    useRouteMatch,
    useParams
} from "react-router-dom"
function App() {
  return (
    <div className="App" >
        <HelloHook />
        <UserReduce />
        <Router>
            <nav>
                <ul>
                    <li>
                        <Link to="/">ToDoApp</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                        <NavLink to="/about" activeClassName="hurray">About</NavLink>
                    </li>
                    <li>
                        <Link to="/users">Users</Link>
                    </li>
                    <li>
                        <Link to="/topics">Topics</Link>
                    </li>
                   {/* <Redirect to="/users" />*/}
                </ul>
            </nav>
            <Switch>
                <Route path="/about">
                    <About />
                </Route>
                <Route path="/topics">
                    <Topics />
                </Route>
                <Route path="/users">
                    <Users />
                </Route>
                <Route path="/">
                    <TodoApp />
                </Route>
            </Switch>
        </Router>
    </div>
  );
}
function Topics() {
    const match = useRouteMatch();
    return (
        <div>
            <h2>Topics</h2>
            <ul>
                <li>
                    <Link to={`${match.url}/components`}>Components</Link>
                </li>
                <li>
                    <Link to={`${match.url}/props-v-state`}> Props v. State</Link>
                </li>
            </ul>
            <Switch>
                {   console.log(match,useLocation())
                }
                <Route path={`${match.path}/:topicId`}>
                    <Topic />
                </Route>
                <Route path={match.path}>
                    <h3>Please select a topic.</h3>
                </Route>
            </Switch>
        </div>
    )
}
function Topic() {
    let { topicId } = useParams();
    return <h3>Requested topic ID: {topicId}</h3>;
}
function Home() {
    return <h2>Home</h2>;
}

function About() {
    return <h2>About</h2>;
}

function Users() {
    return <h2>Users</h2>;
}

export default App;
